<style lang="less">
@import "./main.less";
</style>
<template>
    <div class="main" :class="[tehmeNum]">
        <div class="main-leftBox" :class="{closeType: closeType}">
            <div class="controlIsShow">
                <ul class="left-top-menu">
                    <li class="item" v-for="(item) in menuArr"  @click="clickSubTab(item.id, item.link)" :key="item.id">
                        <img :src="item.icon" alt="">
                        <div class="item-children-out">
                            <ul class="item-children" :style="item.isBlock ? 'display: flex' : 'display: block'">
                                <!--<div class="item-name" @click="clickTab(item.id, item.link)">{{item.name}}</div>-->
                                   <li v-for="(item2) in item.children" :key="item2.id" class="item-children-name">
                                        <p class="item-children-name-div" :style="item.isBlock ? '' : 'border: none'" @click="clickSubTab(item2.id, item2.link)">{{item2.name}}</p>
                                        <ul style="list-style-type: none;">
                                            <li class="item-children-children-name" v-for="(item3) in item2.children" @click="clickSubTab(item3.id, item3.link)"  :key="item3.id" >
                                                {{item3.name}}
                                            </li>
                                        </ul>
                                    </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="bottom-menu-position">
                <ul class="left-bottom-menu">
                    <li v-if="userType == 2" @click="goToSettings">
                        <Tooltip content="系统设置" placement="right"><Icon type="md-construct" :size="22" color="#fff"/></Tooltip>
                    </li>
                    <li>
                        <lock-screen></lock-screen>
                    </li>
                    <li>
                        <full-screen v-model="isFullScreen" @on-change="fullscreenChange" ></full-screen>
                    </li>
                    <li>
                        <message-tip v-model="mesCount"></message-tip>
                    </li>
                    <li @click="changeTheme">
                        <Tooltip content="切换主题" placement="right"><Icon type="ios-color-palette" :size="22" color="#fff"/></Tooltip>
                    </li>
                    <li @click="buyService">
                        <Tooltip content="订购服务" placement="right"><Icon type="ios-cart-outline" :size="22" color="#fff"/></Tooltip>
                    </li>
                </ul>
            </div>
            <div class="arrow-box" @click="closeType = !closeType">
                <Icon type="ios-arrow-back" size="10" color="#fff" v-if="!closeType" />
                <Icon type="ios-arrow-forward" size="10" color="#fff" v-else />
            </div>
        </div>
        <div class="main-rightBox" :class="{closeType: closeType}">
            <div class="main-rightBox-top">
                <div class="logo-box">
                    <div class="logo-box-left">
                        <img :src="avatorPath" alt="">
                    </div>
                    <div class="logo-box-right">
                        <div class="logo-box-right-cName">
                            <template v-if="company">
                                <p v-if="company.companyName != null && company.companyName.length <= 30">{{ company.companyName }}</p>
                                <p v-else-if="company.companyName != null && company.companyName.length > 30" :title="company.companyName">{{ company.companyName.substring(0, 30) + "..." }}</p>
                            </template>
                        </div>
                        <div class="logo-box-right-tel">
                            {{ userName }}<Icon type="ios-arrow-down" size="16" color="#fff" class="ml-10" />
                            <ul class="down-box">
                                <li @click="handleClickUserDropdown('ownSpace')">个人中心</li>
                                <li @click="handleClickUserDropdown('modifiPassword')">修改密码</li>
                                <li @click="handleClickUserDropdown('modifiPhone')">修改手机号码</li>
                                <li @click="handleClickUserDropdown('switchingEnterprises')" v-if="changeCompany.companyList != null && changeCompany.companyList.length > 0">切换企业</li>
                                <li @click="handleClickUserDropdown('loginout')">退出登录</li>
                            </ul>
                        </div>
                        <div class="logo-box-right-pName">
                            {{userName2}}
                        </div>
                    </div>
                </div>
                <div class="main-rightBox-head">
                    <div class="main-rightBox-head-menuBox">
                        <ul class="list">
                            <li class="item" v-for="(item) in menuArr" :key="item.id">
                                <img :src="item.icon" alt="">
                                <span @click="clickSubTab(item.id, item.link)">{{item.name}}</span>
                                <div class="item-children-out">
                                    <ul class="item-children" :style="item.isBlock ? 'display: flex' : 'display: block'">
                                        <li v-for="(item2) in item.children" :key="item2.id" class="item-children-name">
                                            <p class="item-children-name-div" :style="item.isBlock ? '' : 'border: none'"  @click="clickSubTab(item2.id, item2.link)">{{item2.name}}</p>
                                            <ul class="list-none">
                                                <li class="item-children-children-name" v-for="(item3) in item2.children" @click="clickSubTab(item3.id, item3.link)" :key="item3.id" >
                                                    {{item3.name}}
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="main-rightBox-head-functionBox">
                        <div class="permanent-box">
                            <ul class="list">
                                <li v-for="(item, index) in myResourceList" :key="index" @click="handleChange(item.resource)">
                                    <img :src="item.resource.icon" alt="">
                                    <span>{{item.resource.name}}</span>
                                </li>
                                <li @click="goToMyDesktop">
                                    <img src="../images/icon/icon19.png" alt="">
                                    <span>查看更多</span>
                                </li>
                            </ul>
                        </div>

                        <div class="transformation-box">
                            <ul class="list">
                                <li v-for="(item, index) in myUseHistoryList" :key="index" @click="handleChange(item.resource)">
                                    <img :src="item.resource.icon" alt="">
                                    <span>{{item.resource.name}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-rightBox-bottom">
                <keep-alive :include="cachePage">
                    <router-view></router-view>
                </keep-alive>
            </div>
        </div>
        <Modal :draggable="true"
            v-model="ThemeMod"
            title="主题换肤"
            @on-cancel="ThemeModCancel"
            :mask-closable="false"
            :footer-hide="true"
            class-name="ThemeModClass"
            class="ThemeModClass-out"
            width="892px">
            <div class="themeList">
                <div class="themeItem" :class="{current: currentNum == index}" v-for="(item, index) in bgList" :key="index" @click="getThemeItem(item.code)">
                    <img :src="item.url" alt="">
                </div>
            </div>
        </Modal>
        <!-- 自定义模态框 -->
        <Modal :draggable="true"  v-model="modifi.Modal" title="修改密码" :mask-closable="false">
            <Form :model="modifi.form" :label-width="70" ref="modifiForm" :rules="modifi.ruleValidate" >
                <!-- ref == id rules:表单验证 -->
                <FormItem label="原始密码" prop="oldPwd" >
                <Input v-model="modifi.form.oldPwd" placeholder="请输入原始密码" type="password"/>
                </FormItem>
                <FormItem label="新密码" prop="newPwd" >
                <Input v-model="modifi.form.newPwd" type="password"/>
                </FormItem>
                <FormItem label="确认密码" prop="Pwd" >
                <Input v-model="modifi.form.Pwd" type="password"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Row type="flex" justify="center" class="code-row-bg" >
                    <Col span="5">
                        <Button type="primary"  @click="deleteForm('modifiForm')" >取消</Button>
                    </Col>
                    <Col span="5">
                        <Button type="primary"  @click="saveModifi('modifiForm')" >确认修改</Button>
                        <!-- modifiForm == id == ref -->
                    </Col>
                </Row>
            </div>
        </Modal>
        <Modal :draggable="true" v-model="phoneDifi.Modal" title="修改手机号" :mask-closable="false">
            <Form :model="phoneDifi.form" :label-width="70" ref="phoneForm" :rules="phoneDifi.ruleValidatephone" >
                <FormItem label="手机号" prop="phone" >
                    <Input v-model="phone" disabled />
                </FormItem>
                <FormItem label="密码"  prop="phonePwd" >
                    <Input v-model="phoneDifi.form.phonePwd" placeholder="请输入密码" type="password" />
                </FormItem>
                <FormItem label="新手机号" prop="newPhone" >
                    <Input v-model="phoneDifi.form.newPhone" placeholder="请输入新手机号" />
                </FormItem>
                <FormItem label="验证码" prop="verificationCode" class="verificationCode-class">
                    <Input v-model="phoneDifi.form.verificationCode" placeholder="请输入收到的短信验证码" />
                        <!-- 验证码 -->
                    <img style="display: block" :src="verificationCodeImg" alt=""  @click='goVc()'  class="noBorder">
                </FormItem>
            </Form>
            <div slot="footer">
                <Row type="flex" justify="center" class="code-row-bg" >
                <Col span="5">
                <Button type="primary" @click="deleteForm('phoneForm')">取消</Button>
                </Col>
                <Col span="5">
                <Button
                    type="primary"
                    @click="saveModifi('phoneForm')"
                >确认修改</Button>
                </Col>
                </Row>
            </div>
        </Modal>
        <Modal :draggable="true" v-model="changeCompany.modal" title="切换公司" :mask-closable="false" :footer-hide="true">
            <Table :columns="changeCompany.columns" :data="changeCompany.companyList" @on-row-click="chooseCompany"></Table>
        </modal>
    </div>
</template>
<script>
import shrinkableMenu from './main-components/shrinkable-menu/shrinkable-menu.vue';
import tagsPageOpened from './main-components/tags-page-opened.vue';
import breadcrumbNav from './main-components/breadcrumb-nav.vue';
import fullScreen from './main-components/fullscreen.vue';
import lockScreen from './main-components/lockscreen/lockscreen.vue';
import messageTip from './main-components/message-tip.vue';
import themeSwitch from './main-components/theme-switch/theme-switch.vue';
import Cookies from 'js-cookie';
import util from '@/libs/util.js';

export default {
    components: {
        shrinkableMenu,
        tagsPageOpened,
        breadcrumbNav,
        fullScreen,
        lockScreen,
        messageTip,
        themeSwitch
    },
    data () {
        // 新密码验证
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('此项为必填项'));
            } else {
                var passReg = /^[a-zA-Z0-9\u4e00-\u9fa5_]*$/;
                if (!passReg.test(value)) {
                    callback(new Error('格式有误'));
                } else {
                    callback();
                }
            }
        };
        const validatePassAgin = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('此项为必填项'));
            } else {
                var passReg = /^[a-zA-Z0-9\u4e00-\u9fa5_]*$/;
                if (!passReg.test(value)) {
                    callback(new Error('格式有误，请重新输入'));
                } else if (value !== this.modifi.form.newPwd) {
                    callback(new Error('两次密码输入不相等，请重新输入'));
                } else {
                    callback();
                }
            }
        };
        return {
            // 公司信息
            company: {
                id: null,
                companyName: null
            },
            shrink: true,
            avatorPath: require('@/images/companyLogo.png'),
            userName: '',
            userName2: '',
            password: '',
            isFullScreen: false,
            openedSubmenuArr: this.$store.state.app.openedSubmenuArr,
            Cookies: Cookies,
            // 获取手机号
            phone: '',
            // 是否弹出修改密码框
            verificationCodeImg: '',
            modifi: {
                Modal: false,
                // 动态标题
                // title: '',
                form: {
                    oldPwd: '',
                    newPwd: '',
                    Pwd: ''
                },
                // 获取的手机号
                //  修改密码
                ruleValidate: {
                    loading: false,
                    oldPwd: [
                        {
                            required: true,
                            type: 'string',
                            message: '原始密码输入有误',
                            trigger: 'blur'
                        },
                        {
                            type: 'string',
                            pattern: /^[a-zA-Z0-9\u4e00-\u9fa5_]*$/,
                            message: '描述只能输入汉字数字英文下划线',
                            trigger: 'blur'
                        }
                    ],
                    newPwd: { validator: validatePass, trigger: 'blur', required: true },
                    Pwd: [
                        { validator: validatePassAgin, trigger: 'blur' }

                    ]
                }
            },
            //   手机验证
            phoneDifi: {
                Modal: false,
                form: {
                    phonePwd: '',
                    newPhone: '',
                    verificationCode: ''
                },
                ruleValidatephone: {
                    loading: false,
                    phonePwd: [
                        {
                            required: true,
                            type: 'string',
                            message: '原始密码输入有误',
                            trigger: 'blur'
                        },
                        {
                            type: 'string',
                            pattern: /^[a-zA-Z0-9\u4e00-\u9fa5_]*$/,
                            message: '描述只能输入汉字数字英文下划线',
                            trigger: 'blur'
                        }
                    ],

                    newPhone: [
                        {
                            required: true,
                            type: 'string',
                            message: '手机号码输入有误',
                            trigger: 'blur'
                        },
                        {
                            type: 'string',
                            pattern: /^1\d{10}$/,
                            message: '手机号输入不正确,请重新输入',
                            trigger: 'blur'
                        }
                    ],
                    verificationCode: [
                        {
                            required: true,
                            type: 'string',
                            message: '验证码输入有误',
                            trigger: 'blur'
                        },
                        {
                            type: 'string',
                            pattern: /^[0-9]*$/,
                            message: '验证码输入有误',
                            trigger: 'blur'
                        }
                    ]
                }
            },
            changeCompany: {
                // 是否打开窗口
                modal: false,
                columns: [
                    {
                        title: '公司名称',
                        key: 'companyName',
                        align: 'center'
                    }
                ],
                // 数据
                companyList: []
            },
            menuArr: [],
            // waitArr: [],
            currentTabIndex: '',
            oldName: '',
            waitName: '',
            userType: null,
            closeType: false,
            // 我的最近使用列表
            myUseHistoryList: [],
            // 我的桌面列表
            myResourceList: [],
            ThemeMod: false,
            currentNum: 0,
            tehmeNum: '',
            bgList: [
                {
                    code: 0,
                    url: require('@/images/bg0pic.jpg')
                },
                {
                    code: 1,
                    url: require('@/images/bg1pic.jpg')
                }
                // ,
                // {
                //     code: 2,
                //     url: require('@/images/bg2pic.jpg')
                // },
                // {
                //     code: 3,
                //     url: require('@/images/bg3pic.jpg')
                // },
                // {
                //     code: 4,
                //     url: require('@/images/bg4pic.jpg')
                // },
                // {
                //     code: 5,
                //     url: require('@/images/bg5pic.jpg')
                // },
                // {
                //     code: 6,
                //     url: require('@/images/bg6pic.jpg')
                // },
                // {
                //     code: 7,
                //     url: require('@/images/bg7pic.jpg')
                // },
                // {
                //     code: 8,
                //     url: require('@/images/bg8pic.jpg')
                // },
                // {
                //     code: 9,
                //     url: require('@/images/bg9pic.jpg')
                // }
            ],
        };
    },
    computed: {
        menuList () {
            return this.$store.state.app.menuList;
        },
        pageTagsList: {
            get: function () {
                let arr = JSON.parse(JSON.stringify(this.$store.state.app.pageOpenedList));
                console.log(arr, '进来了1');
                return this.$store.state.app.pageOpenedList;
            },
            set: function (newValue) {
                console.log(newValue, '995');
                localStorage.pageOpenedList = JSON.stringify(newValue);
                return newValue;
            }
        },
        currentPath () {
            return this.$store.state.app.currentPath; // 当前面包屑数组
        },
        // avatorPath () {
        //     return localStorage.avatorImgPath;
        // },
        cachePage () {
            return this.$store.state.app.cachePage;
        },
        lang () {
            return this.$store.state.app.lang;
        },
        menuTheme () {
            return this.$store.state.app.menuTheme;
        },
        mesCount () {
            return this.$store.state.app.messageCount;
        }
    },
    methods: {
        setLocalStorageInfo () {
            depot.get({
                url: this.URL.USER.FIND_MY_ALL_INFO,
                cb: (data) => {
                    if (data.code === 0) {
                        let userCompanyInfo = data.data;
                        localStorage.setItem('USER_NAME', userCompanyInfo.name);
                        localStorage.setItem('USER_TYPE', userCompanyInfo.type);
                        localStorage.setItem('company', JSON.stringify(userCompanyInfo.company));
                        localStorage.setItem('menus', '');
                        this.getMenu();
                        location.reload();
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                    this.showSpin = false;
                }
            });
        },
        chooseCompany (param, index) {
            if (param && param.id) {
                depot.post({
                    url: this.URL.USER.CHANGE_COMPANY,
                    data: param.id,
                    cb: data => {
                        if (data.code === 0) {
                            let company = {
                                id: param.id,
                                companyName: param.companyName
                            };
                            this.$store.commit('clearAllTags');
                            this.$router.push({
                                name: 'home_index'
                            });
                            this.setLocalStorageInfo();
                            depot.get({
                                url: this.URL.USER.MENUS,
                                cb: (data) => {
                                    if (data.data) {
                                        sessionStorage.setItem('menus', JSON.stringify(data.data));
                                        this.menuArr = data.data;
                                    }
                                }
                            });
                        } else {
                            this.$Message.error(data.message);
                        }
                    }
                });
            }
        },
        init () {
            this.userName = Cookies.get('user');
            this.userName2 = localStorage.getItem('USER_NAME')
            let companyJson = localStorage.getItem('company')
            if (companyJson) {
                let company = JSON.parse(companyJson);
                this.avatorPath = company.logo;
            }

            // 从登陆时候获取电话号码
            this.phone = Cookies.get('phone');
            // console.log(this.phone, 'this.phonethis');
            // this.checkTag(this.$route.name);

            this.getCountByMessageLogNotRead();

            this.getMenu();

            // 获取我的桌面
            this.findMyResourceList();

            // 获取主题
            this.getThemeData();
        },
        // 获取最近使用记录
        findMyUseHistoryList () {
            depot.get({
                url: this.URL.USER.FIND_MY_USE_HISTORY_LIST,
                cb: data => {
                    if (data.code === 0) {
                        if (this.myResourceList.length === 0) {
                            this.myUseHistoryList = data.data.slice(0, 10);
                        } else if (this.myResourceList.length === 1) {
                            this.myUseHistoryList = data.data.slice(0, 9);
                        } else if (this.myResourceList.length === 2) {
                            this.myUseHistoryList = data.data.slice(0, 8);
                        } else if (this.myResourceList.length === 3) {
                            this.myUseHistoryList = data.data.slice(0, 7);
                        } else if (this.myResourceList.length === 4) {
                            this.myUseHistoryList = data.data.slice(0, 6);
                        } else if (this.myResourceList.length === 5) {
                            this.myUseHistoryList = data.data.slice(0, 5);
                        }
                    } else {
                        this.$Message.error(data.message);
                    }
                },
                ce: error => {
                    this.$Message.error('获取最近使用记录失败');
                }
            });
        },
        // 获取我的桌面
        findMyResourceList () {
            depot.get({
                url: this.URL.USER.FIND_MY_RESOURCE_LIST,
                cb: data => {
                    if (data.code === 0) {
                        if (data.data.length > 5) {
                            this.myResourceList = data.data.slice(0, 5);
                        } else {
                            this.myResourceList = data.data;
                        }
                        // 获取我的最近使用记录
                        this.findMyUseHistoryList();
                    } else {
                        this.$Message.error(data.message);
                    }
                },
                ce: error => {
                    this.$Message.error('获取我的桌面失败');
                }
            });
        },
        // 跳转到我的桌面按钮
        goToMyDesktop () {
            this.$router.push({
                path: '/home/myDesktop'
            });
        },
        handleChange (resource) {
            if (!resource) {
                return;
            }
            // console.log(resource.link, 11);
            //   let willpush = true;
            //   if (this.beforePush !== undefined) {
            //     if (!this.beforePush(name)) {
            //       willpush = false;
            //     }
            //   }
            //   if (willpush) {
            this.saveMyUseHistory(resource.id);
            this.$router.push({
                name: resource.link
            });
            //   }
        },
        // 保存操作记录
        saveMyUseHistory (resourceId) {
            if (!resourceId) {
                return;
            }
            depot.post({
                url: this.URL.USER.SAVE_MY_USE_HISTORY,
                data: resourceId,
                cb: (data) => {
                }
            });
        },
        // 拿Menu
        getMenu () {
            let menusCache = sessionStorage.getItem('menus');
            if (menusCache) {
                this.menuArr = JSON.parse(menusCache);
                let currentTabIndex = sessionStorage.getItem('currentTabIndex');
                if (currentTabIndex === null || currentTabIndex === undefined) {
                    this.currentTabIndex = 0;
                } else {
                    this.currentTabIndex = parseInt(currentTabIndex);
                }
                for (var i=0; i < this.menuArr.length; i++) {
                    let parentMenu = this.menuArr[i];
                    parentMenu.isBlock = false;
                    for (var j=0; j < parentMenu.children.length; j++) {
                        let childrenMenu = parentMenu.children[j];
                        if (childrenMenu.children && childrenMenu.children.length > 0) {
                            parentMenu.isBlock = true;
                            break;
                        }
                    }
                }
            } else {
                depot.get({
                    url: this.URL.USER.MENUS,
                    cb: (data) => {
                        if (data.data) {
                            sessionStorage.setItem('menus', JSON.stringify(data.data));
                            this.menuArr = data.data;
                            for (var i=0; i < this.menuArr.length; i++) {
                                let parentMenu = this.menuArr[i];
                                parentMenu.isBlock = false;
                                for (var j=0; j < parentMenu.children.length; j++) {
                                    let childrenMenu = parentMenu.children[j];
                                    if (childrenMenu.children && childrenMenu.children.length > 0) {
                                        parentMenu.isBlock = true;
                                        break;
                                    }
                                }
                            }
                        }
                    }
                });
            }
        },
        // 点击当前tab
        clickTab (id, link) {
            // localStorage.setItem('currentTabIndex', val);
            // localStorage.setItem('menus', JSON.stringify(this.menuArr));
            // this.currentTabIndex = val;
            // this.menuArr[this.currentTabIndex].selectedTab = 0;
            this.saveMyUseHistory(id);
            this.$router.push({
                name: link
            });
        },

        // 点击子菜单
        clickSubTab (id, link) {
            // this.menuArr[this.currentTabIndex].selectedTab = val;
            // localStorage.setItem('menus', JSON.stringify(this.menuArr));
            this.saveMyUseHistory(id);
            // console.log(this.menuArr, 1, this.currentTabIndex, 2, val, 3);
            console.log(link, 'link');
            this.$router.push({
                name: link
            });
        },

        // 拿到消息中心未读信息个数并放入store
        getCountByMessageLogNotRead () {
            this.showSpin = true;
            depot.get({
                url: this.URL.MESSAGE.COUNT_BY_MESSAGELOG_NOT_READ,
                cb: (data) => {
                    this.showSpin = false;
                    if (data.code === 0) {
                        let messageCount = data.data;
                        this.$store.commit('setMessageCount', messageCount);
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                    this.showSpin = false;
                }
            });
        },
        toggleClick () {
            this.shrink = !this.shrink;
        },
        handleClickUserDropdown (name) {
            console.log(name, 213123123);
            if (name === 'ownSpace') {
                // util.openNewPage(this, 'ownspace_index');
                // this.$router.push({
                //     name: 'ownspace_index'
                // });
                // util.openNewPage(this, 'ownspace_index');
                this.$router.push({
                    name: 'ownspace_index'
                });
            } else if (name === 'loginout') {
                this.loginOut();
            } else if (name === 'modifiPassword') {
                // 打开修改密码的弹窗
                this.modifi.Modal = true;
                // 1.执行清空表单操作
                this.$refs.modifiForm.resetFields();
                // this.saveModifi();
            } else if (name === 'modifiPhone') {
                // 打开修改手机号的弹窗
                this.phoneDifi.Modal = true;
                // 1.执行清空表单操作
                this.$refs.phoneForm.resetFields();
                //   this.savePhoneModel();
            } else if (name === 'switchingEnterprises') {
                this.changeCompany.modal = true;
            }
        },
        // 获取公司列表
        findCompanyList () {
            depot.get({
                url: this.URL.USER.FIND_MY_COMPANY_LIST,
                cb: data => {
                    if (data.code === 0) {
                        // 排除当前公司
                        this.changeCompany.companyList = [];
                        data.data.forEach(item => {
                            if (item && item.id != this.company.id) {
                                this.changeCompany.companyList.push(item);
                            }
                        });
                    } else {
                        this.$Message.error(data.message);
                    }
                }
            });
        },
        // 登出
        loginOut () {
            depot.get({
                url: this.URL.USER.LOGOUT,
                cb: data => {
                    if (data.code === 0) {
                        // 退出登录
                        this.$store.commit('logout', this);
                        this.$store.commit('clearOpenedSubmenu');
                        window.location.href = '/';
                        // this.$router.push({
                        //     name: 'login'
                        // });
                    } else {
                        this.$Message.error(data.message);
                    }
                }
            });
        },
        checkTag (name) {
            let openpageHasTag = this.pageTagsList.some(item => {
                if (item.name === name) {
                    return true;
                }
            });
            if (!openpageHasTag) {
                //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
                // util.openNewPage(
                //     this,
                //     name,
                //     this.$route.params || {},
                //     this.$route.query || {}
                // );
            }
        },
        handleSubmenuChange (val) {},
        beforePush (name) {
            // if (name === 'accesstest_index') {
            //     return false;
            // } else {
            //     return true;
            // }
            return true;
        },
        fullscreenChange (isFullScreen) {},
        goToBusinessHome () {
            // // 跳转商家中心
            Cookies.set('access', 1);
            this.$store.commit('updateMenulist');
            this.$router.push('/home');
        },
        // 修改密码及及修改手机号
        // 1.取消修改
        deleteForm (name) {
            // 参数为修改密码得表单
            if (name == 'modifiForm') {
                // 1.关闭修改密码的弹窗
                this.modifi.Modal = false;
                // 2.执行清空表单操作
                this.$refs.modifiForm.resetFields();
            } else {
            // 参数为修改手机得表单
                // 2.关闭修改密码的弹窗
                this.phoneDifi.Modal = false;
                // 1.执行清空表单操作
                this.$refs.phoneForm.resetFields();
            }
            // // 1.执行清空表单操作
            // this.$refs.modifiForm.resetFields();
            // // 2.关闭修改密码的弹窗
            // this.modifi.Modal = false;
        },
        // 2.确认修改
        saveModifi (name) {
            console.log(name, 'names');
            // console.log(vue.password, 'password');
            // console.log(this.modifi.form.oldPwd, 'oldPwd');
            // 如果传的参数是修改密码
            if (name == 'modifiForm') {
                // 判断传入的id的表单验证
                this.$refs[name].validate(valid => {
                // ref == id; rules == 判断整个表单的所有的验证， 触发的事件中包含的是id即ref
                // 如果验证通过
                    if (valid) {
                        var passWord = {
                            oldPassword: this.modifi.form.oldPwd,
                            newPassword: this.modifi.form.newPwd,
                            repeatPassword: this.modifi.form.Pwd
                        };
                        depot.post({
                            url: this.URL.USER.UPDATE_PASSWORD,
                            data: passWord,
                            cb: data => {
                                // console.log(data, 'modifi.form');
                                if (data.code === 0) {
                                    // 成功后执行
                                    // 1.关闭修改密码的弹窗
                                    this.modifi.Modal = false;
                                    // 2.提示成功
                                    this.$Message.success('修改密码成功,请重新登陆');
                                    // 3.执行登出操作
                                    this.loginOut();
                                } else {
                                    this.$Message.error(data.message);
                                }
                            },
                            ce: error => {
                                this.$Message.error(data.message);
                            }
                        });
                    } else {
                        this.$Message.error('请按要求填写');
                    }
                });
            } else {
            // 如果传的参数是修改手机号
                var phoneArry = {
                    oldMobile: this.phone,
                    newMobile: this.phoneDifi.form.newPhone,
                    oldPassword: this.phoneDifi.form.phonePwd,
                    validateCode: this.phoneDifi.form.verificationCode
                };
                console.log(phoneArry, 'phoneArry');
                this.$refs[name].validate(valid => {
                    if (valid) {
                    // phone;
                        depot.post({
                            url: this.URL.USER.UPDATE_MOBILE_BY_IMAGE_VALIDA,
                            data: phoneArry,
                            cb: data => {
                            // console.log(data, 'modifi.form');
                                if (data.code === 0) {
                                // 成功后执行
                                // 1.关闭修改的弹窗
                                    this.phoneDifi.Modal = false;
                                    // 2.提示成功
                                    this.$Message.success('手机修改成功，请重新登陆');
                                    // 3.执行登出操作
                                    this.loginOut();
                                    console.log(data, 'data.code');
                                } else {
                                    this.$Message.error(data.message);
                                }
                            },
                            ce: (error) => {
                                this.$Message.error(data.message);
                            }
                        });
                    }
                });
            }
        },
        // 得到图形验证码
        Vc () {
            // console.log(this.phoneDifi.form.newPhone, '查看当前新输入手机号');
            var vue = this;
            // 定义得到图形验证码时需要传输的参数手机号码
            var mobile = this.phone;
            depot.get({
                url: vue.URL.DOCUMENT.GET_VERIFICATION_CODE_FOR_UPDATE_MOBILE + '?mobile=' + mobile,
                cb: data => {
                    // console.log(data, 'modifi.form');
                    if (data.code === 0) {
                        vue.verificationCodeImg = 'data:image/png;base64,' + data.data.verificationCodeImg;
                        // console.log(vue.verificationCodeImg, '查看当前验证码');
                    } else {
                        vue.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                    vue.$Message.error(data.message);
                }
            });
        },
        // 点击重新得到图形验证码
        goVc () {
            this.Vc();
        },
        goToSettings () {
            window.open('/settings', '_blank');
        },
        updatePageTagsList (val) {
            this.pageTagsList = JSON.parse(JSON.stringify(val));
        },
        // 打开切换主题
        changeTheme () {
            this.ThemeMod = true;
        },
        // 发送选中主题
        getThemeItem (key) {
            console.log(key, 222);

            let userHabit = {};
            userHabit.type = 'THEME';
            userHabit.value = key;
            depot.post({
                url: this.URL.USER.SAVE_USER_HABIT,
                data: userHabit,
                cb: (data) => {
                    if (data.code === 0) {
                        console.log(data.data, 222);
                        if (key) {
                            this.currentNum = key;
                            this.tehmeNum = 'tehme' + key;
                        } else {
                            this.currentNum = 0;
                            this.tehmeNum = '';
                        }
                        this.ThemeMod = false;

                        localStorage.setItem('currentNum', key);
                        localStorage.setItem('bgList', JSON.stringify(this.bgList));
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                    this.showSpin = false;
                }
            });
        },
        ThemeModCancel () {
            this.ThemeMod = false;
        },
        // 获取主题
        getThemeData () {
            let queryParams = {};
            queryParams.type = 'THEME';
            depot.get({
                url: this.URL.USER.FIND_USER_HABIT_BY_TYPE,
                config: {
                    params: queryParams
                },
                cb: (data) => {
                    if (data.code === 0) {
                        console.log(data.data, 111);
                        if (!data.data) {
                            this.currentNum = 0;
                            this.tehmeNum = '';
                        } else {
                            this.currentNum = data.data.value;
                            this.tehmeNum = 'tehme' + data.data.value;
                            console.log(this.bgList, ' this.tehmeNum this.tehmeNum');
                        }

                        //                      bgList: [
                        // {
                        //     code: 0,
                        //     url: require('@/images/bg0pic.jpg')
                        // },
                        // {
                        //     code: 1,
                        //     url: require('@/images/bg1pic.jpg')
                        // }
                    } else if (data.code === 999) {
                        this.$Message.error(data.message);
                    }
                },
                ce: (error) => {
                    this.showSpin = false;
                }
            });
        },
        //购买服务
        buyService () {
            window.location.href = '/#/productService'
        }
    },
    watch: {
        // $route (to) {
        //     this.$store.commit('setCurrentPageName', to.name);
        //     let pathArr = util.setCurrentPath(this, to.name);
        //     if (pathArr.length > 2) {
        //         this.$store.commit('addOpenSubmenu', pathArr[1].name);
        //     }
        //     this.checkTag(to.name);
        //     localStorage.currentPageName = to.name;
        // },
        // lang () {
        //     util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
        // }
        '$route' (form, to) {
            // console.log(form.name, '新', to.name, '旧');
            this.oldName = to.name;
            // console.log(this.oldName, '本地的');
            if (form.name === this.waitName) {
                // console.log(form.name, '进来了');
                // this.menuArr.forEach((item, index) => {
                //     if (this.currentTabIndex === index) {
                //         item.children.forEach((item2, index2) => {
                //             if (item2.link === form.name) {
                //                 // console.log(index2, '拿index2');
                //                 this.menuArr[this.currentTabIndex].selectedTab = index2;
                //                 localStorage.setItem('menus', JSON.stringify(this.menuArr));
                //             }
                //         });
                //     }
                // });
            }
        },
        'oldName' (val) {
            // console.log(this.oldName, val, 'oldName');
            this.waitName = val;
        }
    },
    created () {
        // 显示打开的页面的列表
        this.$store.commit('setOpenedList');
        let company = localStorage.getItem('company');
        if (company) {
            this.company = JSON.parse(company);
        }
        let userType = localStorage.getItem('USER_TYPE');
        if (userType) {
            this.userType = userType;
        }
        this.findCompanyList();
        // this.getMenu();
    },
    mounted () {
        this.init();
        // 得到图形验证码
        this.Vc();
    }
};
</script>
